import React from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Modal, Tree } from 'antd';

const { confirm } = Modal;

// 获取整个树
const getTreeNode = treeNodes => {
  let resInfo = {};
  treeNodes.forEach(res => {
    resInfo[res.key] = res.title;
    if (res.children) {
      const children = getTreeNode(res.children);

      resInfo = Object.assign({}, resInfo, children);
    }
  });
  return resInfo;
};

@Form.create()
@connect(({ resource, loading }) => ({
  resource,
  loading: loading.models.resource,
}))
class AllotRes2User extends React.Component {
  static defaultProps = {
    values: {
      appId: 0,
      type: 0,
    },
    isEdit: false,
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      expandedKeys: [],
      selectedKeys: [],
      autoExpandParent: false,
      checkedKeys: [],
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'resource/fetchDepartmentResTree',
    });
    dispatch({
      type: 'resource/fetchUserRes',
      callback: data => {
        this.setState({
          checkedKeys: data,
        });
      },
    });
  }

  okHandle = () => {
    const {
      handleUpdate,
      resource: { departmentResTree },
    } = this.props;
    const { checkedKeys } = this.state;

    // 获取资源树信息
    const resInfo = getTreeNode(departmentResTree);
    const items = [];
    checkedKeys.forEach(checkedKey => {
      items.push(
        <p style={{ margin: 5 }}>
          <strong>{resInfo[checkedKey]}</strong>
        </p>
      );
    });
    confirm({
      title: '将申请如下资源：',
      content: <div>{items}</div>,
      onOk() {
        handleUpdate({
          applyResIds: checkedKeys,
        });
      },
    });
  };

  // 节点选中
  onCheck = checkedKeys => {
    this.setState({ checkedKeys });
  };

  // 树节点选择
  onSelect = (selectedKeys, info) => {
    const { selected } = info;
    if (selected) {
      // 节点选中状态
      this.setState({
        selectedKeys,
      });
    }
    this.setState({ selectedKeys });
  };

  // 树展开
  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  render() {
    const {
      allotResVisible,
      handleModalVisible,
      values,
      resource: { departmentResTree },
    } = this.props;
    const { expandedKeys, autoExpandParent, checkedKeys, selectedKeys } = this.state;

    return (
      <Modal
        destroyOnClose
        width={540}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="选择资源权限"
        visible={allotResVisible}
        onCancel={() => handleModalVisible(false, false, values)}
        onOk={this.okHandle}
      >
        <div style={{ height: '500px', overflow: 'scroll' }}>
          <Row gutter={8}>
            <Col span={16}>
              <Tree
                checkable
                expandedKeys={expandedKeys}
                checkedKeys={checkedKeys}
                selectedKeys={selectedKeys}
                autoExpandParent={autoExpandParent}
                onCheck={this.onCheck}
                onSelect={this.onSelect}
                onExpand={this.onExpand}
                treeData={departmentResTree}
              />
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}

export default AllotRes2User;
